<template>
<div class="bigBox">
   <div class="crosstalklist" v-for="item in crosstalklist" :key="item.performanceId">
      <div class="imgbox">
         <img :src="item.posterUrl "/>
      </div>
      <div class="cntbox">
         <div class="one">{{ item.name }}</div>
         <div class="two">{{ item.showTimeRange}}</div>
         <span class="two twoo">{{ item.cityName }}</span>
         <span class="two twoo"> {{ item.shopName }}</span>
         <div class="bottom">
            <span class="showpiao">售票中</span>
            <span class="jiage">{{ item.priceRange }}元</span>
            <span class="ziying">自营</span>
         </div>
      </div>
   </div>
</div>
</template>

<script>
export default {
    props: {
    crosstalklist: Array,
  },
 data () {
return {
}
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
.bigBox{
  margin-bottom: 50px;
}
.crosstalklist {
  background: white;
  width: 100%;
  display: flex;
  flex: 1;
  font-size: 16px;
   border-bottom: 1px solid #F9F9F9;
   padding: 10px 0;
  .imgbox {
    width: 20%;

    img {
      width: 90%;
      margin:0 10%;
      width: 100px;
      height: 135px;
    }
  }
  .cntbox {
    width: 65%;

    margin-left: 45px;
   
    .one {
      font-size: 17px;
      color: #333;
      font-weight: 700;
     overflow: hidden;
      white-space: normal !important;
     -webkit-line-clamp: 2;
     display:-webkit-box ;
     text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
    .two {
      font-size: 12px;
      margin-top: 12px;
      color: #888;
      font-family: PingFangSC-Regular;
      i{
        font-style: normal;
        display: inline-block;
        margin-left: 3px;
        font-weight: 700;
        color: #faaf00;
        font-size: 15px;
        line-height: 30px;
      }
    }
    .twoo{margin-top: 4px;}
   .bottom{
      margin-top: 23px ;
      font-size:12px ;
      .showpiao{
         display: inline-block;
         color: #ff937b;
         margin-right: 5px;
         background-color: #fff1ef;
         width: 45px;
         height: 20px;
         text-align: center;
      }
      .jiage{
         font-family: ArialMT;
         margin-top: 25px;
      }
      .ziying{
         color: #ccc;
         float:right
      }
   }
  }
 
}
</style>
